<template>
    <div class="tabs-box">
      <el-tabs 
          v-model="activeKey" 
          class="custom-tabs"         
          @tab-click="handleClick"
          @tab-remove="handleRemove"
          @contextmenu.prevent="onContextmenu($event)"
          >
          <el-tab-pane        
              v-for="item in tabList"
              :key="item.path"
              :label="item.name"
              :name="item.path"
              :closable="item.path !== '/resume'"
          >                      
          </el-tab-pane>
      </el-tabs>
      <tab-bartool v-show="tabBarVisible" :style="posXY"  />
    </div>
  </template>
  <script lang="ts" setup>
    import {onMounted,onBeforeUnmount, ref, computed, watch, reactive } from 'vue'  
    import type { TabsPaneContext } from 'element-plus'

    import tabBartool from '../tabBartool/index.vue'

    import { useStore } from 'vuex'
    import { useRoute, useRouter } from 'vue-router'
    import {tabItem} from '@/store'
        
    const store = useStore()
    const route = useRoute()
    const router = useRouter()
    
    const tabList = computed(()=>{
        console.log(store.getters.getTab)
        return store.getters.getTab
    })    
    const activeKey = ref('/resume')
    
    const addTab = ()=>{
      const {meta, path} = route
      console.log('meta', meta)
      console.log('path', path)
      const tab:tabItem = {
        path: path,
        name: meta.title as string
      }
      store.commit('addTab', tab)
    }

    watch(()=>route.path,()=>{
        activeKey.value = route.path
        console.log('activeKey.value',activeKey.value)
        addTab()
    }, {immediate: true})
    const closeTabBartool = (e:any)=>{
      if(tabBarVisible.value === true){
        tabBarVisible.value = false
      }
    }
    onMounted(()=>{
      window.addEventListener('mousedown', e=>{
        closeTabBartool(e)
      })
    })
    onBeforeUnmount(()=>{
      window.removeEventListener('mousedown', e=>{
        closeTabBartool(e)
      })
    })
    // const editableTabs = ref([
    // {
    //     title: 'Tab 1',
    //     name: '1',
    //     content: 'Tab 1 content',
    // },
    // {
    //     title: 'Tab 2',
    //     name: '2',
    //     content: 'Tab 2 content',
    // },
    // ])

  
  // const activeName = ref('first')
  
  const handleClick = (tab: TabsPaneContext) => {
    router.push({
      path: tab.props.name as string
    })
  }
  const handleRemove = (tabName:string)=>{
    console.log('tabName', tabName)
    if(activeKey.value === tabName){
      tabList.value.forEach((tab:tabItem, index:number)=>{
        if(tab.path === tabName){
          const nextTab = tabList.value[index+1]||tabList.value[index-1]
          if(nextTab){
            activeKey.value = nextTab.path
            router.push({
              path: nextTab.path
            })
          }
        }
      })
    }
    store.commit('removeTab', tabName)
  }

  //面包屑工具栏
  let tabBarVisible = ref(false)
  const posXY = reactive({
    left: '0px',
    top: '0px'
  })
  const onContextmenu = (e:any) =>{
    // console.log('event', e)
    if(e.srcElement.id){
      let currentContextTab = e.srcElement.id.split('-')[1]
      tabBarVisible.value = true
      posXY.left = e.clientX+'px'
      posXY.top = (e.clientY + 10) +'px'
      store.commit('setCurrentRouteName', currentContextTab)
      // console.log('posXY', posXY)
    }
    else{
      tabBarVisible.value = false
    }

  }

  </script>
  <style lang="scss">
    .el-tabs.custom-tabs{
      .el-tabs__header{
        margin-bottom: 4px;
        padding: 0 10px;
      }
      & .el-tabs__item{
        & .is-icon-close{
          opacity: 0 !important;
        }
        &:hover .is-icon-close{
          opacity: 1 !important;
        }
      } 
    }
  </style>
  <style lang="scss" scoped>
    .tabs-box{
      background: #fff;
    }
  </style>
  